<template>
  <div class="geren-container">
      <div class="g-header">
          <div class="img">
              <img :src="mes.avatarUrl" alt="">
          </div>
          <div class="xinxi">
              <div class="name">
                  <div class="f-cb">
                      <h3>{{ mes.nickname }}</h3>
                      <div class="dengji">
                          <img src="@/assets/common/dengji.jpg" alt="">
                      </div>
                      <div class="sex">
                          <img src="@/assets/common/nv.jpg" alt="" v-if="isNv">
                          <img src="@/assets/common/nan.png" alt="" v-else>
                      </div>
                      <a href="" class="sixin">
                          <i class="el-icon-message"></i>
                          发私信
                      </a>
                      <div class="guanzhu">
                          <i class="el-icon-plus"></i>
                          关注
                      </div>
                      <div href="" class="chakan" @click="$router.push(`/singerMus/${id}`)">查看歌手页</div>
                  </div>
                  <div class="djp">
                      <div class="rz">V 认证</div>
                      <span v-for="(v, i) in xinxi.identifyTag" :key="i">{{ v }}</span>
                  </div>
              </div>
              <ul>
                      <li class="dongtai">
                          <h2>{{ eventCount }}</h2>
                          <span>动态</span>
                      </li>
                      <li class="gz">
                          <h2>10</h2>
                          <span>关注</span>
                      </li>
                      <li class="fensi">
                          <h2>779586</h2>
                          <span>粉丝</span>
                      </li>
            </ul>
            <div class="inf">个人介绍：亞洲國寶級傳奇天后「 a MEI」我是a MEI，一個你認識很久，卻認識不完的女人。</div>
            <div class="area">所在地区：台湾省 - 台北市</div>
          </div>
      </div>
      <div class="u-title">
          <h2>听歌排行</h2>
          <h4>累计听歌29首</h4>
          <div class="right">
              <span class="all">所有时间</span>
              <span class="zuijin">最近一周</span>
          </div>
      </div>
  </div>
</template>

<script>
import { getSingerDetail } from '@/api/singers'
export default {
  data () {
    return {
      isNv: true,
      id: this.$route.params.id,
      mes: '',
      xinxi: '',
      eventCount: ''
    }
  },
  created () {
    this.getSingerDetail()
  },
  methods: {
    async getSingerDetail () {
      const { data } = await getSingerDetail({ id: this.id })
      console.log(data)
      this.eventCount = data.data.eventCount
      this.mes = data.data.user
      this.xinxi = data.data.artist
    }
  }
}
</script>

<style lang="less" scoped>
.geren-container {
    height: 1072px;
    border-left: 1px solid #D3D3D3;
    border-right: 1px solid #D3D3D3;
    padding: 40px;
    .g-header {
        height: 240px;
        .img {
            float: left;
            width: 188px;
            height: 188px;
            padding: 3px;
            border: 1px solid #D5D5D5;
        }
        .xinxi {
            float: right;
            width: 670px;
            height: 195px;
            // background-color: paleturquoise;
            .name {
                margin-bottom: 10px;
                padding-bottom: 12px;
                border-bottom: 1px solid #ddd;
                .f-cb {
                    width: 100%;
                    height: 36px;
                    h3 {
                        float: left;
                        height: 36px;
                        line-height: 36px;
                        font-size: 22px;
                        font-weight: 400;
                    }
                    .dengji {
                        float: left;
                        margin-left: 10px;
                        padding-top: 6px;
                    }
                    .sex {
                        float: left;
                        width: 25px;
                        margin-left: 8px;
                        padding-top: 6px;
                    }
                    .sixin {
                        float: left;
                        width: 65px;
                        height: 27px;
                        line-height: 25px;
                        font-size: 12px;
                        text-align: center;
                        color: #333;
                        margin-left: 15px;
                        margin-top: 4px;
                        padding-left: 2px;
                        border: 1px solid #C4C4C4;
                        border-radius: 5px;
                        background-color: #F2F2F2;
                    }
                    .guanzhu {
                        float: left;
                        width: 65px;
                        height: 27px;
                        line-height: 25px;
                        font-size: 12px;
                        text-align: center;
                        color: #fff;
                        margin-left: 15px;
                        margin-top: 4px;
                        padding-left: 2px;
                        border: 1px solid #297AC7;
                        border-radius: 5px;
                        background-color: #3988D3;
                    }
                    .chakan {
                        float: right;
                        width: 80px;
                        height: 27px;
                        line-height: 25px;
                        font-size: 12px;
                        text-align: center;
                        color: #333;
                        margin-left: 15px;
                        margin-top: 4px;
                        padding-left: 2px;
                        border: 1px solid #C4C4C4;
                        border-radius: 5px;
                        background-color: #F2F2F2;
                        &:hover {
                            cursor: pointer;
                        }
                    }
                }
                .djp {
                    margin-top: 6px;
                    .rz {
                        float: left;
                        width: 68px;
                        height: 20px;
                        font-size: 14px;
                        color: #fff;
                        text-align: center;
                        background-color: #F24C34;
                        margin-right: 6px;
                        border-radius: 20px;
                    }
                    span {
                        height: 20px;
                        line-height: 20px;
                        font-size: 14px;
                        color: #666;
                    }
                }
            }
            ul {
                    height: 40px;
                    margin-bottom: 15px;
                    .dongtai {
                        float: left;
                        padding-right: 40px;
                        h2 {
                            font-size: 24px;
                            color: #666;
                            font-weight: 400;
                        }
                        span {
                            font-size: 12px;
                            color: #666;
                        }
                    }
                    .gz {
                        float: left;
                        padding: 0 40px;
                        border-left: 1px solid #DDDDDD;
                        border-right: 1px solid #DDDDDD;
                        h2 {
                            font-size: 24px;
                            color: #666;
                            font-weight: 400;
                        }
                        span {
                            font-size: 12px;
                            color: #666;
                        }

                    }
                    .fensi {
                        float: left;
                        padding-left: 40px;
                        h2 {
                            font-size: 24px;
                            color: #666;
                            font-weight: 400;
                        }
                        span {
                            font-size: 12px;
                            color: #666;
                        }
                    }
            }
            .inf {
                font-size: 12px;
                color: #666;
                margin-top: 30px;
            }
            .area {
                 font-size: 12px;
                color: #666;
                margin-top: 10px;
            }
        }
    }
    .u-title {
        height: 35px;
        line-height: 35px;
        font-size: 12px;
        h2 {
            float: left;
            font-size: 20px;
            color: #666;
            font-weight: 400;
        }
        h4 {
            float: left;
            font-size: 12px;
            color: #666;
            font-weight: 400;
            margin-left: 10px;
        }
        .right {
            position: relative;
            float: right;
            .all {
                float: right;
                color: #333;
                padding-left: 8px;
                font-weight: 700;
            }
            .zuijin {
                float: right;
                color: #666;
                margin-right: 8px;
                &:after {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 13px;
                    left: 55px;
                    width: 1px;
                    height: 10px;
                    border-left: 1px solid #666;
                }
            }
        }
    }
}
</style>
